<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form th:action="@{/add}" method="post">
    <p>
        出差人员：<input name="userName" type="text"/>
    </p>
    <p>
        职位：<input name="duty" type="text">
    </p>


<!--    <p>-->
<!--        出行方式：<select name="tripModeId">-->
<!--         <span th:each="tripModeId : ${tripModeId}">-->
<!--             <option th:value="${tripModeId.id}" th:text="${tripModeId.name}"></option>-->
<!--            </span>-->
<!--    </select>-->
<!--    </p>-->

    <tr>
        <td>出行方式</td>
        <td>
            <select id="tripModeId" name="tripModeId">
                <option value="">--请选择出行方式--</option>
                <th:block th:each="schedule : ${schedule}">
                    <option th:value="${schedule.id}" th:text="${schedule.name}"></option>
                </th:block>
            </select>
        </td>
    </tr>

    <p>
        出行日期：<input type="text" name="departTime" placeholder="yyyy-MM-dd">
    </p>


    <p>
        状态：
        <input type="radio" name="status" value="0">未出行
        <input type="radio" name="status" value="1">已取消
    </p>
    <input id="submitBtn" type="submit" value="添加">
    </p>



</form>
</body>
<script src="/js/jquery.js"></script>
<script>
    $(function () {
        $('form').submit(function (event) {
            // 取消默认的表单提交行为
            event.preventDefault();

            // 获取表单字段的值
            var userName = $('input[name="userName"]').val();
            var duty = $('input[name="duty"]').val();
            var tripModeId = $('input[name="tripModeId"]').val();
            var departTime = $('input[name="departTime"]').val();

            // 非空验证
            if (userName === '' || duty === '' || tripModeId === '' || departTime === '') {
                alert('所有字段都必须填写！');
                return;
            }

            // 日期格式验证
            var datePattern = /^\d{4}-\d{2}-\d{2}$/;
            if (!datePattern.test(departTime)) {
                alert('出行时间必须按照yyyy-MM-dd的格式输入！');
                return;
            }

            // 如果通过验证，则提交表单
            this.submit();
        });
    })
</script>
</html>